<template>
  <div class="container-box parameter-setting q-pa-md">
    <div class="auto-setting">
      <q-btn
        class="q-mr-md"
        label="启动全自动测试"
        type="submit"
        color="primary"
      />
      <q-btn label="全部复位" type="submit" color="primary" />
    </div>
    <hr />
    <div class="autoSetting-wrapper flex">
      <div class="sample inject-wrapper flex box-wrapper">
        <div class="section-name">注样电机</div>
        <div class="default-text">恢复默认设置</div>
        <ul class="list-setting">
          <li class="item flex">
            <label>第一段行程</label>
            <q-input v-model="firstHeight" outlined style="width: 90px" />
          </li>
          <li class="item flex">
            <label>第二段行程</label>
            <q-input v-model="secondHeight" outlined style="width: 90px" />
          </li>
          <li class="item flex flex-center">
            <label>加速度</label>
            <q-btn-toggle
              v-model="addSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
          <li class="item flex flex-center">
            <label>最大速度</label>
            <q-btn-toggle
              v-model="maxSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
        </ul>
        <div class="flex submit-btn">
          <q-btn label="读取设备参数" type="submit" color="primary" />
          <q-btn label="写入设备参数" type="submit" color="primary" />
        </div>
      </div>
      <div class="siliconeOil inject-wrapper flex box-wrapper">
        <div class="section-name">注样电机</div>
        <div class="default-text">恢复默认设置</div>
        <ul class="list-setting">
          <li class="item flex">
            <label>第一段行程</label>
            <q-input v-model="firstHeight" outlined style="width: 90px" />
          </li>
          <li class="item flex">
            <label>第二段行程</label>
            <q-input v-model="secondHeight" outlined style="width: 90px" />
          </li>
          <li class="item flex flex-center">
            <label>第二段加速度</label>
            <q-btn-toggle
              v-model="addSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
          <li class="item flex flex-center">
            <label>第二段最大速度</label>
            <q-btn-toggle
              v-model="maxSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
          <li class="item flex">
            <label>第三段行程</label>
            <q-input v-model="secondHeight" outlined style="width: 90px" />
          </li>
          <li class="item flex flex-center">
            <label>第三段加速度</label>
            <q-btn-toggle
              v-model="addSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
          <li class="item flex flex-center">
            <label>第三段最大速度</label>
            <q-btn-toggle
              v-model="maxSpeed"
              push
              glossy
              size="sm"
              toggle-color="primary"
              :options="[
                { label: '1', value: '1' },
                { label: '2', value: '2' },
                { label: '3', value: '3' },
                { label: '4', value: '4' },
              ]"
            />
          </li>
        </ul>
        <div class="flex submit-btn">
          <q-btn label="读取设备参数" type="submit" color="primary" />
          <q-btn label="写入设备参数" type="submit" color="primary" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "InjectSample",
  setup() {
    return {
      firstHeight: ref("3100"),
      secondHeight: ref("2550"),
      volume: ref(3),
      brightness: ref(3),
      mic: ref(8),
      addSpeed: ref("1"),
      maxSpeed: ref("1"),
      text: ref("Field content"),
      dense: ref(false),
    };
  },
};
</script>

<style lang="scss" scoped>
.autoSetting-wrapper {
  justify-content: space-around;
}
.inject-wrapper {
  width: 30%;
  min-width: 300px;
  .section-name {
    width: 100%;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
  }
  .list-setting {
    padding-left: 20px;
    line-height: 36px;
    li {
      align-items: center;
    }
    label {
      width: 120px;
      text-align: right;
      padding-right: 20px;
    }
  }
  .submit-btn {
    width: 100%;
    justify-content: space-between;
    margin: 10px 0;
    button {
      width: 100px;
    }
  }
}
.default-text {
  width: 100%;
  line-height: 30px;
  color: #1976d2;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
}
</style>
